<template>
  <view class="es_tab-state" v-if="tabItem">
    <!-- 初始默认加载中提示 -->
    <view class="loading-wrap" v-if="!tabItem.end && !tabItem.list.length">
      {{ initLoadingDesc }}
    </view>
    <!-- 加载完毕 -->
    <view v-if="tabItem.end">
      <!-- 加载完毕 - 空列表描述 -->
      <!-- <van-empty :description="emptyDesc" v-if="!tabItem.list.length" /> -->
      <u-empty
        icon="http://cdn.uviewui.com/uview/empty/history.png"
        :text="emptyDesc"
        v-if="!tabItem.list.length"
      ></u-empty>
      <!-- 加载完毕 - 全部加载完成描述 -->
      <view class="ended-wrap">
        {{ endDesc }}
      </view>
    </view>
    <!-- 触底加载中提示 -->
    <view class="loading-wrap" v-if="tabItem.bottomLoading">
      {{ reachBottomLoadingDesc }}
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // tabItem实例
    tabItem: {
      type: [Object, null],
      default: null
    },
    // 初始加载文本提示
    initLoadingDesc: {
      type: String,
      default: "加载中..."
    },
    // 空列表描述
    emptyDesc: {
      type: String,
      default: "暂无信息"
    },
    // tabItem加载完毕显示文本
    endDesc: {
      type: String,
      default: "已经到底了"
    },
    // tabItem加载完毕是否显示结束文本
    endDescShow: {
      type: Boolean,
      default: true
    },
    // tabItem加载完毕显示结束文本最小页码
    endDescShowPage: {
      type: Number,
      default: 2
    },
    // tabItem触底加载显示文本
    reachBottomLoadingDesc: {
      type: String,
      default: "加载中..."
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .u-empty {
  padding: 50px 0 30px;
}
.loading-wrap {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: rgb(144, 147, 153);
}

.ended-wrap {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: rgb(144, 147, 153);
}
</style>
